<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>服务管理</title>
</head>
<body>
<div id="page-services" class="page-content hidden">
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
        <div>
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-dark">服务管理</h2>
            <p class="text-gray-500">查看和管理所有酒店服务信息</p>
        </div>
        <div class="mt-4 md:mt-0 flex gap-3">
            <button id="add-service-btn"
                    class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors btn-hover">
                <i class="fa-solid fa-plus mr-2"></i>添加服务
            </button>
        </div>
    </div>

    <!-- 筛选器 -->
    <div class="bg-white rounded-xl p-4 card-shadow mb-6">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">服务名称</label>
                <input type="text" placeholder="搜索服务名称" id="search-service-name"
                       class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">服务类型</label>
                <select id="filter-service-type"
                        class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
                    <option value="">所有类型</option>
                    <option value="1">基础服务</option>
                    <option value="2">餐饮服务</option>
                    <option value="3">娱乐休闲</option>
                    <option value="4">商务服务</option>
                    <option value="5">接送服务</option>
                </select>
            </div>
            <div class="flex items-end">
                <button id="filter-service-btn"
                        class="w-full px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors">
                    <i class="fa-solid fa-search mr-2"></i>搜索
                </button>
            </div>
        </div>
    </div>

    <!-- 服务列表 -->
    <div class="bg-white rounded-xl card-shadow overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full">
                <thead>
                <tr class="bg-gray-50 text-left text-gray-500 text-sm">
                    <th class="px-6 py-3 font-medium">服务名称</th>
                    <th class="px-6 py-3 font-medium">服务信息</th>
                    <th class="px-6 py-3 font-medium">服务类型</th>
                    <th class="px-6 py-3 font-medium">服务价格</th>
                    <th class="px-6 py-3 font-medium">操作</th>
                </tr>
                </thead>
                <tbody id="service-table-body">
                </tbody>
            </table>
        </div>
    </div>
    
     <!-- 分页条 -->
    <div class="pagination-container" id="service-pagination-container">
        <div class="page-info" id="service-page-info"></div>
        <div class="pagination-buttons" id="service-pagination-buttons"></div>
    </div>   
</div>
<!-- 引用服务模态框模板（假设为独立文件） -->
{% include 'service-modal.html' %}
<script src="/static/js/service.js"></script>
</body>
</html>